<template>
	<view class="product-detail">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left">
				<text class="back-icon" @click="goBack">‹</text>
				<text class="menu-icon" @click="toggleMenu">☰</text>
			</view>
			<view class="nav-tabs">
				<view class="tab-item" :class="{ active: activeTab === 'product' }" @click="scrollToSection('product')">
					<text class="tab-text">商品</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'reviews' }" @click="scrollToSection('reviews')">
					<text class="tab-text">评价</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'details' }" @click="scrollToSection('details')">
					<text class="tab-text">详情</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'recommend' }" @click="scrollToSection('recommend')">
					<text class="tab-text">推荐</text>
				</view>
			</view>
			<view class="nav-right">
			</view>
		</view>

		<!-- 汉堡菜单弹出框 -->
		<view class="menu-overlay" v-if="showMenu" @click="hideMenu">
			<view class="menu-popup" @click.stop>
				<view class="menu-item" @click="goToHome">
					<text class="menu-icon">🏠</text>
					<text class="menu-text">首页</text>
				</view>
				<view class="menu-item" @click="goToCart">
					<text class="menu-icon">🛒</text>
					<text class="menu-text">购物车</text>
				</view>
				<view class="menu-item" @click="goToSearch">
					<text class="menu-icon">🔍</text>
					<text class="menu-text">搜索</text>
				</view>
				<view class="menu-item" @click="goToProfile">
					<text class="menu-icon">👤</text>
					<text class="menu-text">个人中心</text>
				</view>
			</view>
		</view>

		<!-- 页面加载遮罩 -->
		<view class="page-loading-overlay" v-if="isPageLoading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载商品...</text>
			</view>
		</view>

		<!-- 产品图片轮播 -->
		<view class="product-image-section" id="product">
			<swiper class="image-swiper" :indicator-dots="false" :autoplay="false" @change="onSwiperChange">
				<swiper-item v-for="(image, index) in productImages" :key="index">
					<image class="product-image" :src="image" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="image-counter">{{ currentImageIndex + 1 }}/{{ productImages.length }}</view>
		</view>

		<!-- 产品信息区域 -->
		<view class="product-info">
			<view class="price-section">
				<text class="price">¥{{ currentProduct ? currentProduct.originalPrice : '3111.00' }}</text>
				<view class="action-buttons">
					<view class="action-btn" @click="showShareModal">
						<image class="share-icon" src="../../static/goumaishangpin/分享.png" mode="aspectFit"></image>
						<text class="action-text">分享</text>
					</view>
					<view class="action-btn" @click="toggleFavorite">
						<image class="favorite-icon" :src="isFavorited ? '../../static/goumaishangpin/已收藏.png' : '../../static/goumaishangpin/收藏.png'" mode="aspectFit"></image>
						<text class="action-text">{{ isFavorited ? '已收藏' : '收藏' }}</text>
					</view>
				</view>
			</view>
			
			<text class="product-title">{{ currentProduct ? currentProduct.productName : '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222' }}</text>
			<text class="product-subtitle">{{ currentProduct ? currentProduct.description : '专业微单相机' }}</text>
		</view>

		<!-- 产品详情列表 -->
		<view class="product-details">
			<view class="detail-item" @click="showPromotionModal">
				<text class="detail-label">促销</text>
				<text class="detail-value">暂无促销信息</text>
				<text class="detail-arrow">›</text>
			</view>
			<view class="detail-item" @click="showProductModal">
				<text class="detail-label">已选</text>
				<text class="detail-value">{{ selectedOption }}</text>
				<text class="detail-arrow">›</text>
			</view>
			<view class="detail-item" @click="showAddressModal">
				<text class="detail-label">送至</text>
				<text class="detail-value">{{ defaultAddress ? getFullAddress(defaultAddress) : '请选择地址' }}</text>
				<text class="detail-arrow">›</text>
			</view>
		</view>

		<!-- 评价区域 -->
		<view class="reviews-section" id="reviews">
			<view class="reviews-header">
				<text class="reviews-title">评价 2+</text>
				<text class="reviews-rate">好评率 100%</text>
			</view>
			<view class="review-item">
				<image class="user-avatar" src="../../static/goumaishangpin/小丸子.jpg" mode="aspectFill"></image>
				<view class="review-content">
					<text class="username">*达达</text>
					<text class="review-text">系统默认好评</text>
					<text class="product-name">{{ currentProduct ? currentProduct.productName : '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222' }}</text>
				</view>
			</view>
			<view class="review-item">
				<image class="user-avatar" src="../../static/goumaishangpin/小丸子.jpg" mode="aspectFill"></image>
				<view class="review-content">
					<text class="username">**正楠</text>
					<text class="review-text">系统默认好评</text>
					<text class="product-name">{{ currentProduct ? currentProduct.productName : '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222' }}</text>
				</view>
			</view>
			<button class="view-all-reviews-btn" @click="goToReviews">查看全部评价</button>
		</view>

		<!-- 店铺信息 -->
		<view class="store-section">
			<image class="store-image" src="../../static/goumaishangpin/小丸子.jpg" mode="aspectFill"></image>
			<view class="store-info">
				<text class="store-name">杂货铺</text>
				<text class="store-stats">445人关注 24572件商品</text>
			</view>
			<button class="enter-store-btn" @click="goToStore">进店逛逛</button>
		</view>

		<!-- 店内其他商品 -->
		<view class="other-products">
			<text class="section-title">店内其他商品</text>
			<view class="products-grid">
				<view class="product-item" v-for="(item, index) in otherProducts" :key="index" @click="selectOtherProduct(item)">
					<image class="product-thumb" :src="item.image" mode="aspectFill"></image>
					<text class="product-desc">{{ item.name }}</text>
					<text class="product-price">¥{{ item.price }}</text>
				</view>
			</view>
		</view>

		<!-- 商品介绍 -->
		<view class="product-intro" id="details">
			<text class="section-title">商品介绍</text>
			<view class="intro-content-wrapper">
				<text class="intro-content">{{ currentProduct ? currentProduct.description : '专业微单相机' }}</text>
			</view>
		</view>

		<!-- 商品参数 -->
		<view class="params-section">
			<text class="section-title">商品参数</text>
			<view class="params-empty">
				<image class="params-icon" src="../../static/goumaishangpin/暂无商品参数.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 热门商品 -->
		<view class="hot-products" id="recommend">
			<text class="section-title">热门商品</text>
			<view class="products-grid">
				<view class="product-item" v-for="(item, index) in hotProducts" :key="index" @click="selectHotProduct(item)">
					<image class="product-thumb" :src="item.image" mode="aspectFill"></image>
					<text class="product-desc">{{ item.name }}</text>
					<text class="product-price">¥{{ item.price }}</text>
					<text class="product-sales">已售 {{ item.sales }}</text>
					<text class="product-reviews">{{ item.reviews }}条评论</text>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goToStore">
				<image class="nav-icon" src="../../static/goumaishangpin/店铺.png" mode="aspectFit"></image>
				<text class="nav-text">店铺</text>
			</view>
			<view class="nav-item" @click="goToCustomerService">
				<image class="nav-icon" src="../../static/goumaishangpin/客服.png" mode="aspectFit"></image>
				<text class="nav-text">客服</text>
			</view>
			<view class="nav-item" @click="goToCart">
				<image class="nav-icon" src="../../static/goumaishangpin/购物车.png" mode="aspectFit"></image>
				<text class="nav-text">购物车</text>
			</view>
			<button class="add-to-cart-btn" @click="showProductModal">加入购物车</button>
			<button class="buy-now-btn" @click="showProductModal">立即购买</button>
		</view>

		<!-- 促销信息弹窗 -->
		<view class="modal-overlay" v-if="showPromotion" @click="hidePromotionModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">优惠</text>
					<text class="close-btn" @click="hidePromotionModal">×</text>
				</view>
				<view class="modal-body">
					<text class="promotion-text">促销活动</text>
					<text class="promotion-text">可领优惠券</text>
				</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<view class="modal-overlay" v-if="showShare" @click="hideShareModal">
			<view class="share-modal" @click.stop>
				<text class="share-title">分享至</text>
				<view class="share-options">
					<view class="share-option" @click="shareToWeChat">
						<text class="wechat-icon">💬</text>
						<text class="share-option-text">微信好友</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 地址选择弹窗 -->
		<view class="modal-overlay" v-if="showAddress" @click="hideAddressModal">
			<view class="address-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">选择地址</text>
					<text class="close-btn" @click="hideAddressModal">×</text>
				</view>
				
				<!-- 地址列表 -->
				<view class="address-list" v-if="addressList.length > 0">
					<view 
						v-for="(address, index) in addressList" 
						:key="index"
						class="address-item"
						:class="{ 'selected': selectedAddress && selectedAddress.id === address.id }"
						@click="selectAddress(address)"
					>
						<view class="address-icon">
							<text v-if="address.isDefault === 1" class="default-badge">默认</text>
							<text v-else-if="selectedAddress && selectedAddress.id === address.id" class="selected-icon">✓</text>
							<text v-else class="unselected-icon">○</text>
						</view>
						<view class="address-content">
							<text class="address-text">{{ getFullAddress(address) }}</text>
							<text v-if="address.receiverName" class="receiver-info">收货人：{{ address.receiverName }}</text>
							<text v-if="address.receiverPhone" class="phone-info">电话：{{ address.receiverPhone }}</text>
						</view>
					</view>
				</view>
				
				<!-- 无地址提示 -->
				<view v-else class="no-address">
					<text class="no-address-text">暂无地址信息</text>
				</view>
				
				<view class="modal-footer">
					<button class="select-other-btn" @click="selectOtherAddress">选择其他地址</button>
					<button class="confirm-btn" @click="confirmAddress">确定</button>
				</view>
			</view>
		</view>

		<!-- 商品选择弹出框 -->
		<view class="modal-overlay" v-if="showProduct" @click="hideProductModal">
			<view class="product-modal" @click.stop>
				<view class="product-modal-header">
					<text class="close-btn" @click="hideProductModal">×</text>
				</view>
				<view class="product-summary">
					<image class="product-thumb" :src="currentProduct && currentProduct.images && currentProduct.images.length > 0 ? currentProduct.images[0] : '../../static/goumaishangpin/小丸子.jpg'" mode="aspectFit"></image>
					<view class="product-info">
						<text class="product-name">{{ currentProduct ? currentProduct.productName : '商品名称' }}</text>
						<text class="product-price">¥{{ currentProduct ? currentProduct.originalPrice : '3111.00' }}</text>
						<text class="stock-info">库存 {{ currentProduct ? (currentProduct.stock || 0) : 0 }}</text>
					</view>
				</view>

				<view class="quantity-section">
					<text class="quantity-title">数量</text>
					<view class="quantity-selector">
						<text class="quantity-btn" @click="decreaseQuantity">-</text>
						<text class="quantity-value">{{ quantity }}</text>
						<text class="quantity-btn" @click="increaseQuantity">+</text>
					</view>
				</view>
				<view class="product-modal-footer">
					<button class="add-to-cart-modal-btn" @click="confirmAddToCart">加入购物车</button>
					<button class="buy-now-modal-btn" @click="confirmBuyNow">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { get,post } from '@/config/request'
	
	export default {
		data() {
			return {
				// 当前商品信息
				currentProductId: '1',
				currentProduct: {
					id: '1',
					productName: '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222',
					originalPrice: '3111.00',
					description: '专业微单相机',
					images: [
						'../../static/goumaishangpin/照相机1.png',
						'../../static/goumaishangpin/照相机2.png'
					],
					options: ['1111', '2222', '3333'],
					stock: 100
				},
				isPageLoading: false,
				isFavorited: false,
				showPromotion: false,
				showShare: false,
				showAddress: false,
				showMenu: false,
				showProduct: false,
				activeTab: 'product',
				currentImageIndex: 0,
				selectedOption: '2222',
				quantity: 1,
				productImages: [
					'../../static/goumaishangpin/照相机1.png',
					'../../static/goumaishangpin/照相机2.png'
				],
				// 地址相关数据
				addressList: [], // 地址列表
				defaultAddress: null, // 默认地址
				selectedAddress: null, // 当前选中的地址
				
				// 模拟数据 - 后续从接口获取
				otherProducts: [
					{ id: '001', name: 'test001 12.9寸', price: '19799.00', image: '../../static/goumaishangpin/小丸子.jpg' },
					{ id: '002', name: '法拉利 555', price: '3.00', image: '../../static/goumaishangpin/小丸子.jpg' },
					{ id: '003', name: '大本水电费', price: '10000000.00', image: '../../static/goumaishangpin/小丸子.jpg' },
					{ id: '004', name: '测试111', price: '2.00', image: '../../static/goumaishangpin/小丸子.jpg' },
					{ id: '005', name: '大空', price: '9999.00', image: '../../static/goumaishangpin/小丸子.jpg' },
					{ id: '006', name: '111', price: '111.00', image: '../../static/goumaishangpin/小丸子.jpg' }
				],
				hotProducts: [
					{ id: '101', name: 'test 升级版', price: '20.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '1', reviews: '1' },
					{ id: '102', name: 'qh-测试商品 超清', price: '140.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '2', reviews: '2' },
					{ id: '103', name: '相机1', price: '3999.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '5', reviews: '4' },
					{ id: '104', name: 'test_food b 1', price: '3.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '0', reviews: '0' },
					{ id: '105', name: '墨染机 黑色', price: '59999.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '17', reviews: '1' },
					{ id: '106', name: '付费测试 微聊', price: '1999.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '0', reviews: '0' },
					{ id: '107', name: '乒乓球1', price: '12.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '0', reviews: '0' },
					{ id: '108', name: '1321 5.6', price: '156.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '24', reviews: '6' },
					{ id: '109', name: '11 222', price: '22.00', image: '../../static/goumaishangpin/小丸子.jpg', sales: '0', reviews: '0' }
				]
			}
		},
		methods: {
			// 获取商品详情信息
			async fetchProductDetail(productId) {
				this.isPageLoading = true
				uni.showLoading({
					title: '加载中...'
				})
				
				try {
					const response = await get(`/shangpin/platform/front/${productId}`)
					
					if (response && response.data) {
						const productData = response.data
						
						setTimeout(() => {
							try {
								this.updateProductWithVueSet(productData)
							} catch (error) {
								this.currentProduct = { ...productData }
								this.productImages = [...productData.images]
							}
							
							setTimeout(() => {
								this.$forceUpdate()
							}, 100)
						}, 50)
						
					} else {
						this.loadDefaultProductData()
					}
				} catch (error) {
					console.error('获取商品详情失败:', error)
					uni.showToast({
						title: '获取商品信息失败',
						icon: 'none'
					})
					this.loadDefaultProductData()
				} finally {
					this.isPageLoading = false
					uni.hideLoading()
				}
			},
			
			// 加载默认商品数据（API失败时的降级处理）
			loadDefaultProductData() {
				this.currentProduct = {
					id: '1',
					productName: '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222',
					originalPrice: '3111.00',
					description: '专业微单相机',
					images: [
						'../../static/goumaishangpin/照相机1.png',
						'../../static/goumaishangpin/照相机2.png'
					],
					options: ['1111', '2222', '3333'],
					stock: 100
				}
				this.productImages = [...this.currentProduct.images]
				this.$forceUpdate()
			},
			
			// 使用Vue.set确保响应式更新（针对内置浏览器兼容性）
			updateProductWithVueSet(productData) {
				Object.keys(productData).forEach(key => {
					if (this.currentProduct.hasOwnProperty(key)) {
						this.$set(this.currentProduct, key, productData[key])
					}
				})
				this.$forceUpdate()
			},
			
			// 导航方法
			goBack() {
				uni.navigateBack()
			},
			goToStore() {
				uni.navigateTo({
					url: '/pages/dianpu/dianpu'
				})
			},
			goToCustomerService() {
				uni.navigateTo({
					url: '/pages/lianxikefu/lianxikefu'
				})
			},
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goToSearch() {
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				})
			},
			goToProfile() {
				uni.switchTab({
					url: '/pages/wode/wode'
				})
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/gouwuche/gouwuche'
				})
			},
			goToStore() {
				uni.navigateTo({
					url: '/pages/dianpu/dianpu'
				})
			},
			goToReviews() {
				uni.navigateTo({
					url: '/pages/shangpinpingjia/shangpinpingjia'
				})
			},

			// 轮播图切换
			onSwiperChange(e) {
				this.currentImageIndex = e.detail.current
			},

			// 滚动到指定区域
			scrollToSection(section) {
				const query = uni.createSelectorQuery()
				query.select(`#${section}`).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					if (res[0]) {
						uni.pageScrollTo({
							scrollTop: res[0].top - 100,
							duration: 300
						})
					}
				})
			},

			// 监听滚动更新导航状态 - 修复选中逻辑
			onPageScroll(e) {
				const scrollTop = e.scrollTop
				const windowHeight = uni.getSystemInfoSync().windowHeight
				
				// 使用更精确的滚动位置判断
				if (scrollTop < 300) {
					this.activeTab = 'product'
				} else if (scrollTop < 600) {
					this.activeTab = 'reviews'
				} else if (scrollTop < 900) {
					this.activeTab = 'details'
				} else {
					this.activeTab = 'recommend'
				}
			},

			// 收藏功能
			toggleFavorite() {
				this.isFavorited = !this.isFavorited
			},

			// 弹窗控制
			showPromotionModal() {
				this.showPromotion = true
			},
			hidePromotionModal() {
				this.showPromotion = false
			},
			toggleMenu() {
				this.showMenu = !this.showMenu
			},
			hideMenu() {
				this.showMenu = false
			},
			showProductModal() {
				// 重置数量为1
				this.quantity = 1
				this.showProduct = true
			},
			hideProductModal() {
				this.showProduct = false
			},
			showShareModal() {
				this.showShare = true
			},
			hideShareModal() {
				this.showShare = false
			},
			showAddressModal() {
				this.showAddress = true
			},
			hideAddressModal() {
				this.showAddress = false
			},

			// 分享功能
			shareToWeChat() {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				})
				this.hideShareModal()
			},

			// 获取完整地址字符串
			getFullAddress(address) {
				if (!address) return ''
				
				// 拼接省市区
				let fullAddress = ''
				if (address.province) fullAddress += address.province
				if (address.city) fullAddress += address.city
				if (address.district) fullAddress += address.district
				if (address.detailAddress) fullAddress += address.detailAddress
				
				return fullAddress || '地址信息不完整'
			},
			
			// 获取地址列表
			async fetchAddressList() {
				try {
					// 从缓存中获取用户ID
					const userInfo = uni.getStorageSync('userInfo')
					const memberId = userInfo?.memberId || userInfo?.id
					console.log(userInfo)
					if (!memberId) {
						console.log('未找到用户ID，无法获取地址')
						return
					}
					
					console.log('获取地址列表，用户ID:', memberId)
					
					// 调用API获取地址列表
					const response = await get(`/address/list/${memberId}`)
					
					if (response && response.rows) {
						this.addressList = response.rows
						console.log('地址列表获取成功:', this.addressList)
						
						// 查找默认地址
						this.defaultAddress = this.addressList.find(addr => addr.isDefault === 1)
						
						// 如果没有默认地址，使用第一个地址
						if (!this.defaultAddress && this.addressList.length > 0) {
							this.defaultAddress = this.addressList[0]
						}
						
						// 设置当前选中的地址为默认地址
						this.selectedAddress = this.defaultAddress
						
						console.log('默认地址:', this.defaultAddress)
						console.log('当前选中地址:', this.selectedAddress)
					} else {
						console.log('地址列表为空')
						this.addressList = []
					}
				} catch (error) {
					console.error('获取地址列表失败:', error)
					uni.showToast({
						title: '获取地址失败',
						icon: 'none'
					})
				}
			},
			
			// 选择地址
			selectAddress(address) {
				this.selectedAddress = address
				console.log('选中地址:', address)
			},
			
			// 地址选择
			selectOtherAddress() {
				// 这里可以跳转到地址管理页面
				uni.showToast({
					title: '选择其他地址',
					icon: 'none'
				})
			},
			confirmAddress() {
				if (this.selectedAddress) {
					// 更新默认地址显示
					this.defaultAddress = this.selectedAddress
					this.hideAddressModal()
					uni.showToast({
						title: '地址已确认',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '请先选择地址',
						icon: 'none'
					})
				}
			},

			// 商品选择功能
			selectOption(option) {
				this.selectedOption = option
			},
			increaseQuantity() {
				const maxStock = this.currentProduct ? this.currentProduct.stock : 5
				if (this.quantity < maxStock) {
					this.quantity++
				} else {
					uni.showToast({
						title: '已达到最大库存数量',
						icon: 'none'
					})
				}
			},
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--
				}
			},
			async confirmAddToCart() {
				try {
					// 获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					const memberId = userInfo?.memberId || userInfo?.id
					
					console.log('用户信息:', userInfo)
					console.log('提取的memberId:', memberId)
					console.log('userInfo.memberId:', userInfo?.memberId)
					console.log('userInfo.id:', userInfo?.id)
					
					if (!memberId) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						return
					}
					
					if (!this.currentProduct) {
						uni.showToast({
							title: '商品信息不存在',
							icon: 'none'
						})
						return
					}
					
					// 检查库存
					if (this.quantity > this.currentProduct.stock) {
						uni.showToast({
							title: '库存不足',
							icon: 'none'
						})
						return
					}
					
					// 构建请求参数
					const cartData = {
						memberId: memberId,
						productId: this.currentProduct.id,
						quantity: this.quantity,
						price: this.currentProduct.originalPrice*this.quantity,
						selected: 0
					}
					
					console.log('加入购物车参数:', cartData)
					console.log('请求URL:', '/cart')
					console.log('请求方法:', 'POST')
					
					// 调用加入购物车接口
					const response = await post('/cart', cartData)
					
					console.log('接口响应:', response)
					
					if (response && response.code) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success'
						})
						this.hideProductModal()
					} else {
						uni.showToast({
							title: response?.message || '加入购物车失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加入购物车失败:', error)
					console.error('错误详情:', error.response || error.message)
					uni.showToast({
						title: '加入购物车失败，请重试',
						icon: 'none'
					})
				}
			},
			confirmBuyNow() {
				// uni.showToast({
				// 	title: '跳转支付页面',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url:'/pages/tianxiedingdan/tianxiedingdan'
				})
				this.hideProductModal()
			},
			// 购物功能
			addToCart() {
				this.showProductModal()
			},
			buyNow() {
				this.showProductModal()
			},

			// 商品选择功能
			selectOtherProduct(product) {
				console.log('选择店内其他商品:', product)
				// 使用页面跳转效果
				this.navigateToProduct(product.id, 'other')
			},

			selectHotProduct(product) {
				console.log('选择热门商品:', product)
				// 使用页面跳转效果
				this.navigateToProduct(product.id, 'hot')
			},

			// 页面跳转到商品详情
			navigateToProduct(productId, source) {
				// 显示页面加载状态
				this.isPageLoading = true
				
				// 添加页面切换动画效果
				setTimeout(() => {
					// 使用重定向方式跳转，模拟新页面效果
					uni.redirectTo({
						url: `/pages/goumaishangpin/goumaishangpin?id=${productId}&source=${source}`,
						success: () => {
							console.log('页面跳转成功')
						},
						fail: (err) => {
							console.error('页面跳转失败:', err)
							this.isPageLoading = false
							// 跳转失败时降级为普通刷新
							this.fetchProductDetail(productId)
						}
					})
				}, 100) // 短暂延迟，让用户感受到点击反馈
			},

			// 加载商品详情
			async loadProductDetail(productId, source = 'other') {
				try {
					// 显示页面加载状态
					this.isPageLoading = true
					
					// 显示加载提示
					uni.showLoading({
						title: '加载中...'
					})

					// 更新当前商品ID
					this.currentProductId = productId

					// 使用模拟数据
					const productData = this.getMockProductData(productId, source)
					
					// 更新页面数据
					this.updateProductData(productData)
					
					// 滚动到页面顶部
					this.scrollToTop()

				} catch (error) {
					console.error('加载商品详情失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'error'
					})
				} finally {
					uni.hideLoading()
					this.isPageLoading = false
				}
			},

			// 获取商品数据
			getMockProductData(productId, source) {
				const mockData = {
					id: productId,
					name: `商品${productId}`,
					price: (Math.random() * 10000).toFixed(2),
					originalPrice: (Math.random() * 12000).toFixed(2),
					images: [
						'../../static/goumaishangpin/照相机1.png',
						'../../static/goumaishangpin/照相机2.png'
					],
					description: `这是商品${productId}的详细描述`,
					subtitle: `商品${productId}副标题`,
					stock: Math.floor(Math.random() * 100) + 1,
					options: ['1111', '2222', '3333'],
					selectedOption: '2222',
					quantity: 1,
					isFavorited: false,
					reviews: {
						count: Math.floor(Math.random() * 100),
						rate: '100%'
					},
					store: {
						name: '杂货铺',
						followers: Math.floor(Math.random() * 1000),
						products: Math.floor(Math.random() * 50000)
					}
				}
				
				return mockData
			},

			// 更新页面商品数据
			updateProductData(productData) {
				// 更新商品基本信息
				this.currentProduct = productData
				
				// 更新商品图片
				this.productImages = productData.images || [
					'../../static/goumaishangpin/照相机1.png',
					'../../static/goumaishangpin/照相机2.png'
				]
				
				// 重置轮播图索引
				this.currentImageIndex = 0
				
				// 更新商品选项
				this.selectedOption = productData.selectedOption || '2222'
				this.quantity = productData.quantity || 1
				
				// 更新收藏状态
				this.isFavorited = productData.isFavorited || false
				
				// 更新商品标题和价格（这里需要更新模板中的数据）
				// 注意：由于模板中的价格和标题是硬编码的，实际使用时需要改为动态绑定
				console.log('商品数据已更新:', productData)
			},

			// 滚动到页面顶部
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},


		},
		onLoad(options) {
			console.log('页面加载参数:', options)
			
			// 检查用户信息
			const userInfo = uni.getStorageSync('userInfo')
			console.log('页面加载时的用户信息:', userInfo)
			console.log('页面加载时的memberId:', userInfo?.memberId || userInfo?.id)
			
			// 获取商品ID并加载商品详情
			if (options.id) {
				this.currentProductId = options.id
			} else {
				this.currentProductId = '1'
			}
			
			// 调用API获取商品详情
			this.$nextTick(() => {
				setTimeout(() => {
					this.fetchProductDetail(this.currentProductId)
				}, 100)
			})
			
			setTimeout(() => {
				if (this.isPageLoading) {
					this.fetchProductDetail(this.currentProductId)
				}
			}, 500)
			
			// 获取用户地址列表
			this.fetchAddressList()
		},
		mounted() {
			setTimeout(() => {
				if (!this.currentProduct || this.currentProduct.id === '1') {
					this.fetchProductDetail(this.currentProductId)
				}
			}, 300)
		}
	}
</script>

<style scoped>
	.product-detail {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 60px;
		font-size: 10px;
	}

	/* 顶部导航栏 */
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 44px;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		padding: 0 15px;
		z-index: 1000;
		border-bottom: 1px solid #f0f0f0;
		font-size: 10px;
	}

	.nav-left {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 80px;
	}

	.back-icon, .menu-icon {
		font-size: 16px;
		color: #333;
	}

	.nav-tabs {
		flex: 1;
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.tab-item {
		position: relative;
		padding: 7px 0;
	}

	.tab-text {
		font-size: 10px;
		color: #666;
		font-weight: 500;
	}

	.tab-item.active .tab-text {
		color: #ff4444;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background: #ff4444;
		border-radius: 1px;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 80px;
		justify-content: flex-end;
	}

	.nav-icon {
		font-size: 16px;
		color: #333;
	}

	/* 汉堡菜单弹出框 */
	.menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 2000;
	}

	.menu-popup {
		position: absolute;
		top: 50px;
		left: 15px;
		background: #fff;
		border-radius: 8px;
		padding: 10px 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		min-width: 120px;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		gap: 10px;
	}

	.menu-item:active {
		background: #f5f5f5;
	}

	.menu-item .menu-icon {
		font-size: 16px;
	}

	.menu-text {
		font-size: 14px;
		color: #333;
	}

	/* 产品图片区域 */
	.product-image-section {
		position: relative;
		margin-top: 44px;
		background: #fff;
	}

	.image-swiper {
		width: 100%;
		height: 300px;
	}

	.product-image {
		width: 100%;
		height: 100%;
		background: #f0f0f0;
		object-fit: cover;
	}

	.image-counter {
		position: absolute;
		bottom: 15px;
		right: 15px;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 4px 8px;
		border-radius: 12px;
		font-size: 12px;
	}

	/* 产品信息区域 */
	.product-info {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.price-section {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.price {
		font-size: 16px;
		font-weight: bold;
		color: #ff4444;
	}

	.action-buttons {
		display: flex;
		gap: 15px;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}

	.share-icon, .favorite-icon {
		width: 16px;
		height: 16px;
	}

	.action-text {
		font-size: 8px;
		color: #666;
		margin-top: 2px;
	}





	.product-title {
		font-size: 12px;
		color: #333;
		line-height: 1.4;
		margin-bottom: 5px;
		font-weight: 500;
	}

	.product-subtitle {
		font-size: 10px;
		color: #999;
	}

	/* 产品详情列表 */
	.product-details {
		background: #fff;
		margin-bottom: 10px;
	}

	.detail-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-label {
		width: 60px;
		font-size: 10px;
		color: #333;
	}

	.detail-value {
		flex: 1;
		font-size: 10px;
		color: #666;
		margin-left: 10px;
	}

	.detail-arrow {
		font-size: 16px;
		color: #ccc;
	}

	/* 评价区域 */
	.reviews-section {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.reviews-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.reviews-title {
		font-size: 12px;
		font-weight: bold;
		color: #333;
	}

	.reviews-rate {
		font-size: 10px;
		color: #ff4444;
	}

	.review-item {
		display: flex;
		margin-bottom: 15px;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		background: #f0f0f0;
	}

	.review-content {
		flex: 1;
	}

	.username {
		font-size: 10px;
		color: #333;
		margin-bottom: 5px;
	}

	.review-text {
		font-size: 10px;
		color: #666;
		margin-bottom: 5px;
	}

	.product-name {
		font-size: 8px;
		color: #999;
	}

	.view-all-reviews-btn {
		width: 100%;
		height: 40px;
		background: #f5f5f5;
		border: none;
		border-radius: 5px;
		color: #666;
		font-size: 14px;
		margin-top: 10px;
	}

	/* 店铺信息 */
	.store-section {
		background: #fff;
		padding: 15px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		gap: 15px;
	}

	.store-image {
		width: 50px;
		height: 50px;
		border-radius: 8px;
		background: #f0f0f0;
	}

	.store-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	.store-name {
		font-size: 14px;
		font-weight: bold;
		color: #333;
	}

	.store-stats {
		font-size: 10px;
		color: #999;
	}

	.enter-store-btn {
		background: #ff4444;
		color: #fff;
		border: none;
		padding: 8px 15px;
		border-radius: 5px;
		font-size: 12px;
		white-space: nowrap;
	}

	/* 商品网格 */
	.other-products {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.hot-products {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.hot-products .section-title::before {
		content: '';
		position: absolute;
		left: -15px;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 16px;
		background: #ff4444;
		border-radius: 2px;
	}

	.section-title {
		font-size: 12px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		position: relative;
	}

	.section-title::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 20px;
		height: 2px;
		background: #ff4444;
		border-radius: 1px;
	}

	.other-products .products-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.hot-products .products-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.product-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.product-item:active {
		transform: scale(0.95);
	}

	/* 页面切换动画 */
	.product-detail {
		animation: fadeInUp 0.3s ease-out;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 商品图片悬停效果 */
	.product-thumb {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.product-item:hover .product-thumb {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 页面加载遮罩 */
	.page-loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		backdrop-filter: blur(5px);
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 3px solid #f3f3f3;
		border-top: 3px solid #ff4444;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.product-thumb {
		width: 100%;
		height: 80px;
		border-radius: 5px;
		background: #f0f0f0;
		margin-bottom: 5px;
	}

	.product-desc {
		font-size: 8px;
		color: #333;
		text-align: center;
		margin-bottom: 3px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.product-price {
		font-size: 8px;
		color: #ff4444;
		font-weight: bold;
	}

	.product-sales {
		font-size: 6px;
		color: #999;
	}

	.product-reviews {
		font-size: 6px;
		color: #999;
	}

	/* 商品介绍 */
	.product-intro {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.intro-content-wrapper {
		padding: 10px 0;
	}

	.intro-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	/* 商品参数 */
	.params-section {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}

	.params-empty {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40px 0;
	}

	.params-icon {
		width: 675rpx;
		height: 60px;
		/* opacity: 0.6; */
		object-fit: contain;
	}

	/* 底部导航栏 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		padding: 0 8px;
		gap: 3px;
		z-index: 1000;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1px;
		width: 38px;
	}

	.nav-icon {
		width: 20px;
		height: 20px;
	}

	.nav-text {
		font-size: 8px;
		color: #666;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}

	.add-to-cart-btn, .buy-now-btn {
		flex: 1;
		height: 40px;
		border: none;
		border-radius: 5px;
		font-size: 10px;
		font-weight: bold;
		transition: all 0.3s ease;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.add-to-cart-btn {
		background: #ff4444;
		color: #fff;
	}

	.buy-now-btn {
		background: #ffaa00;
		color: #fff;
	}

	.add-to-cart-btn:active, .buy-now-btn:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 2000;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.modal-content, .share-modal, .address-modal {
		background: #fff;
		width: 100%;
		border-radius: 10px 10px 0 0;
		padding: 20px;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 24px;
		color: #999;
	}

	.promotion-text {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.share-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 20px;
	}

	.share-options {
		display: flex;
		justify-content: center;
	}

	.share-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.wechat-icon {
		font-size: 40px;
		color: #07c160;
	}

	.share-option-text {
		font-size: 14px;
		color: #333;
	}

	.address-list {
		max-height: 400rpx;
		overflow-y: auto;
		margin-bottom: 20px;
	}
	
	.address-item {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		margin-bottom: 20px;
		padding: 15px;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.address-item:hover {
		border-color: #ff4444;
		background-color: #fff5f5;
	}
	
	.address-item.selected {
		border-color: #ff4444;
		background-color: #fff5f5;
	}
	
	.address-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
	}
	
	.default-badge {
		background-color: #ff4444;
		color: white;
		font-size: 12px;
		padding: 4px 8px;
		border-radius: 12px;
		font-weight: bold;
	}
	
	.selected-icon {
		color: #ff4444;
		font-size: 20px;
		font-weight: bold;
	}
	
	.unselected-icon {
		color: #ccc;
		font-size: 20px;
	}
	
	.address-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	
	.address-text {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}
	
	.receiver-info, .phone-info {
		font-size: 14px;
		color: #666;
	}
	
	.no-address {
		text-align: center;
		padding: 40px 20px;
	}
	
	.no-address-text {
		font-size: 16px;
		color: #999;
	}

	.selected-icon {
		width: 20px;
		height: 20px;
		background: #ff4444;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.address-text {
		font-size: 14px;
		color: #333;
	}

	.modal-footer {
		display: flex;
		gap: 10px;
	}

	.select-other-btn, .confirm-btn {
		flex: 1;
		height: 40px;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		font-weight: bold;
	}

	.select-other-btn {
		background: #ffaa00;
		color: #fff;
	}

	.confirm-btn {
		background: #ff4444;
		color: #fff;
	}

	/* 商品选择弹出框 */
	.product-modal {
		background: #fff;
		width: 100%;
		border-radius: 12px 12px 0 0;
		padding: 20px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.product-modal-header {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15px;
	}

	.product-summary {
		display: flex;
		gap: 15px;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-thumb {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		background: #f0f0f0;
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		font-weight: 500;
		margin-bottom: 5px;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price {
		font-size: 18px;
		font-weight: bold;
		color: #ff4444;
	}

	.stock-info {
		font-size: 12px;
		color: #666;
	}

	.product-options {
		margin-bottom: 20px;
	}

	.option-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 500;
	}

	.option-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.option-tag {
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #f9f9f9;
	}

	.option-tag.active {
		border-color: #ff4444;
		background: #fff;
	}

	.tag-text {
		font-size: 12px;
		color: #666;
	}

	.option-tag.active .tag-text {
		color: #ff4444;
	}

	.quantity-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.quantity-title {
		font-size: 14px;
		color: #333;
		font-weight: 500;
	}

	.quantity-selector {
		display: flex;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: 6px;
		overflow: hidden;
	}

	.quantity-btn {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		font-size: 16px;
		color: #666;
	}

	.quantity-value {
		width: 40px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		font-size: 14px;
		color: #333;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}

	.product-modal-footer {
		display: flex;
		gap: 10px;
	}

	.add-to-cart-modal-btn, .buy-now-modal-btn {
		flex: 1;
		height: 44px;
		border: none;
		border-radius: 8px;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
	}

	.add-to-cart-modal-btn {
		background: linear-gradient(135deg, #ff4444, #ff6666);
	}

	.buy-now-modal-btn {
		background: linear-gradient(135deg, #ffaa00, #ffcc00);
	}
</style>
